<template>
  <BaseCard
      title="按标签分类"
      height="3rem"
      :contentStyle="{ paddingTop: '0rem' }"
  >
    <div class="label-classification">
      <div class="card-container">
        <CommonBarChart
            ref="baseChartsRef1"
            :labels="labels"
            :tableCounts="tableCounts"
            :capacities="capacities"
            :autoRander="autoRander"
            :autoNumber="autoNumber"
            :height="pieHeight"
        />
      </div>
    </div>
  </BaseCard>
</template>

<script setup>
import {ref} from "vue";
import BaseCard from "@/components/vpt-cards-1001";
import CommonBarChart from "./commonBarChart.vue";

const autoRander = ref(false);
const autoNumber = ref(60);
const pieHeight = ref("2rem");

const labels = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U"];
const tableCounts = [5000, 6000, 7000, 4000, 7000, 7000, 6000, 3000, 3000, 2000, 4000, 7000, 6000, 5000, 2000, 6000, 6000, 6000, 6000, 5000, 4000];
const capacities = [4000, 5000, 6000, 3000, 6000, 6000, 5000, 2000, 2000, 1000, 3000, 6000, 5000, 4000, 1000, 5000, 5000, 5000, 5000, 4000, 3000];
</script>
<style lang="less">
.label-classification {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
</style>